<template>
  <div>
    <el-row>
      <el-col :span="3">
        <el-input
          v-model="ser.employee_name"
          placeholder="请输入员工名称"
        ></el-input>
      </el-col>
      <el-col :span="4">
        <el-input
          v-model="ser.card_number"
          disabled
          placeholder="请读取卡片信息"
          style="margin-left: 10px"
        >
          <el-button
            @click="getkas"
            slot="append"
            icon="el-icon-plus"
            style="background: #1890ff; color: #fff"
            >读卡</el-button
          >
        </el-input>
      </el-col>
      <el-col :span="12">
        <el-button
          @click="company_name_click(0)"
          icon="el-icon-search"
          class="add_btn"
        >
          搜索</el-button
        >
        <el-button
          icon="el-icon-refresh"
          @click="company_name_clicks"
          class="add_btn"
        >
          重置</el-button
        > 
      </el-col>
    </el-row>

    <el-table :data="productList" stripe style="width: 100%" border>
      <el-table-column prop="employee_name" label="员工" width="180"> </el-table-column>
      <el-table-column  label="考勤记录" > 
          <template slot-scope="scope">
            <div>
              <table class="kaoqin_table">
                <tr>
                   <td v-for="(item,index) in scope.row.appendance_log" :key="index">
                     <span>{{}}</span>
                     <span>{{item}}</span>
                   </td>
                </tr>
              </table>
            </div>
          </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="150">
        <template slot-scope="scope">
          <el-button
            @click="set_product(scope.row)"
            type="text"
            icon="el-icon-edit">编辑</el-button>
          <el-popconfirm
            confirm-button-text="确定"
            cancel-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            title="是否删除这条数据？"
            @confirm="del_product(scope.row)"
          >
            <el-button slot="reference" type="text" icon="el-icon-delete">
              删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { getAppendanceLogList } from "@/api/product/index";
export default {
  data() {
    return {
      ser: {
        employee_name: "",
        productList:[]
      },
    };
  },
  mounted() {
    this.get_AppendanceLogList();
  },
  methods:{
    get_AppendanceLogList(){
        getAppendanceLogList().then(res=>{
            if(res.code==200){
              this.productList=res.data.data
            }
        })
    },
    company_name_click(type) {
      if (type == 0) {
        this.pagination.per_page = 10;
        this.pagination.page = 1;
      }
      getEmployeeList({ ...this.ser, ...this.pagination }).then((res) => {
        if (res.code == 200) {
          this.productList = res.data.data;
          this.total = res.data.total;
        }
      });
    },
    company_name_clicks() {
      this.ser.company_name = "";
      getEmployeeList(this.pagination).then((res) => {
        if (res.code == 200) {
          this.productList = res.data.data;
          this.total = res.data.total;
        }
      });
    },
  },
};
</script>
<style lang="">

  .kaoqin_table{
    width: 100%;
  }
  .kaoqin_table tr{
    display: flex;
    align-items: calc();
  }
</style>
